<template>
	<div class="app-container home">
		<el-tabs v-model="activeName" type="card" style="overflow: hidden; height: 680px">
			<el-tab-pane label="个人资料" name="first">
				<el-scrollbar height="600px"><userInfo /></el-scrollbar
			></el-tab-pane>
			<el-tab-pane label="密码管理" name="second"><changePassword /></el-tab-pane>
			<el-tab-pane label="微信绑定" name="third">
				<div style="display: flex;justify-content: space-around;">
					<div style="text-align: center">
						<el-image :src="img" style="width: 350px; height: 350px"></el-image>
						<div><span style="color: #409eff;font-weight: bold;">第一步：</span>扫码关注公众号</div>

					</div>
					<div style="text-align: center">
						<div style="margin-bottom: 30px;"></div>
						<qrcode-vue
							:value="`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd5c9f3a40680040a&redirect_uri=https://erp.dzherp.com/admin/we/vx/get/openId&response_type=code&scope=snsapi_userinfo&state=${userStore.$state.userId}#wechat_redirect`"
							:size="300"
						></qrcode-vue>
						<div style="margin-top: 20px;"><span style="color: #409eff;font-weight: bold;">第二步：</span>扫码绑定账号</div>

					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup name="Index">
import useUserStore from '@/store/modules/user'
import userInfo from './userInfo.vue'
import changePassword from './changePassword.vue'
import QrcodeVue from 'qrcode.vue'
import img from '@/assets/index/gzh.jpg'
const userStore = useUserStore()

const activeName = ref('first')
</script>

<style scoped lang="scss">
.home {
	padding: 20px !important;
	background-color: rgba(255, 255, 255, 1);
	width: 100%;
	:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
		background-color: #409eff;
		color: #ffffff;
	}
}
</style>
